/**
 * 1 点击 '+'按钮，触发tap点击事件
 *   1 调用小程序内置的 选中图片的api
 *   2 获取到 图片的路径 数组
 *   3 把图片路径 存到 data的变量中
 *   4 页面就可以根据 图片的数组 进行循环显示 自定义组件
 * 2 点击 自定义图片 组件
 *   1 获取被点击的元素的索引
 *   2 获取 data中的图片数组
 *   3 根据索引 数组中删除对应的图片元素
 *   4 把数组重新设置回data中
 * 3 用户点击提交按钮
 *   1 获取文本域的内容
 *     1 data中定义变量 表示 输入框内容
 *     2 文本域 绑定 输入事件 事件触发的时候 把输入框的值 存入到变量中
 *   2 对这些内容 做合法性验证
 *   3 验证通过 用户选择的图片 上传到专门的图片服务器中 返回图片外网的链接
 *     1 遍历图片数组 
 *     2 挨个上传
 *     3 自己再维护图片数组 存放 图片上传后的外网的链接
 *   4 文本域 和外网的图片的路径 再一起提交到服务器
 *   5 清空当前页面
 *   6 返回上一页
 */
import {request} from '../../request/index.js';
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs: [
      {
        id: 0,
        value: '体验商品',
        isActive: true
      },
      {
        id: 1,
        value: '商品、商家投诉',
        isActive: false
      }
    ],
    //被选中的图片数组
    chooseImgs: [],
    //文本域的内容
    textVal: ""
  },
  // 外网的图片的路径数组
  UpLoadImgs: [],
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },
  handleItenClick(e) {
    //1 获取被点击的标题索引
    let {index} = e.detail
    const {tabs} = this.data
    tabs.forEach((v,i) => i === index ? v.isActive = true : v.isActive = false)
    this.setData({
      tabs
    })
  },
  // 点击上传图片
  handleChooseImg() {
    //2 调用小程序内置的api
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (result) => {
        this.setData({
          chooseImgs:[...this.data.chooseImgs,...result.tempFilePaths]
        })
      }
    })
  },
  //点击删除图片
  handleRemoveImg(e) {
    //2 获取被点击的数组的索引
    const {index} = e.currentTarget.dataset
    //3 获取data中的图片数组
    let {chooseImgs} = this.data
    //4 删除元素
    chooseImgs.splice(index,1)
    //5 把删除的数组重新填充到data中
    this.setData({
      chooseImgs
    })
  },
  //文本域的输入事件
  handleTextInput(e) {
    this.setData({
      textVal: e.detail.value
    })
  },
  //提交按钮的点击事件
  handleFormSubmit() {
    //1 获取文本域的内容
    const {textVal,chooseImgs} = this.data
    //2 合法性的验证
    if (!textVal.trim()) {
      wx.showToast({
        title: '请输入合法的描述',
        icon: 'none',
        mask: true
      });
      //不合法就不继续往下执行
      return 
    }
    //显示正在等待的图片
    wx.showLoading({
      title: "正在上传中，请稍后",
      mask: true
    })
    if (chooseImgs.length != 0) {
      //图片+文本可以上传
      //3 准备上传图片 到专门的图片服务器
      // 上传文件的api 不支持 同时上传多个, 只能用笨的遍历数组的方式，挨个上传
      chooseImgs.forEach((v,i) => {
        wx.uploadFile({
          //图片要上传到哪里
          url: 'https://imgchr.com/',
          //被上传的文件的路径
          filePath: v,
          //上传的文件的名称，后台来获取文件  file
          name: "file",
          //上传顺带的一些文本信息
          formData: {},
          success: (result) => {
            let url = JSON.parse(result.data).url
            this.UpLoadImgs.push(url)
            //所有的图片都上传完毕了才触发
            if (i === chooseImgs.length - 1) {
              // 上传成功，关闭showLoading
              wx.hideLoading();
              console.log("文本的内容和外网的图片数组，都提交都成功了")
              //重置页面
              this.setData({
                textVal: "",
                chooseImgs: []
              })
              //返回上一个页面
              wx.navigateBack({
                delta: 1
              })
            }
          }
        })
      })
    }else {
      //只有文本也可以上传
      console.log("只是提交了文本")
      wx.hideLoading();//返回上一个页面
      wx.navigateBack({
        delta: 1
      })
    }
  }
})